<template>
  <div class="version-container">
    <el-card shadow="hover" class="version-card">
      <!-- 筛选区域 -->
      <div class="filter-area">
        <el-form :inline="true" :model="filterForm" class="filter-form">
          <div class="filter-controls">
            <el-form-item label="版本号">
              <el-input v-model="filterForm.version" placeholder="请输入版本号" clearable class="filter-input" @blur="handleSearch" />
            </el-form-item>
            <el-form-item label="发布人">
              <el-select
                v-model="filterForm.author"
                filterable
                clearable
                placeholder="请选择发布人"
                class="filter-input"
                :filter-method="filterAuthors"
                @change="handleSearch"
              >
                <el-option
                  v-for="item in filteredAuthorOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="filterForm.createAtRange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
                class="filter-input"
                @change="handleSearch"
              />
            </el-form-item>
            <el-form-item label="评分状态">
              <el-select
                v-model="filterForm.ratingStatus"
                clearable
                placeholder="全部"
                class="filter-input"
                @change="handleSearch"
              >
                <el-option label="全部" :value="''" />
                <el-option label="已评分" value="rated" />
                <el-option label="未评分" value="unrated" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch" class="action-btn">搜索</el-button>
              <el-button @click="resetFilter" class="action-btn">重置</el-button>
            </el-form-item>
          </div>
          <div class="add-version-btn">
            <el-form-item>
              <el-button type="primary" @click="handleAddVersion" class="add-btn">
                <el-icon><Plus /></el-icon> 添加版本
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      
      <!-- 版本列表表格 -->
      <div class="table-scroll">
        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%"
          v-loading="loading"
          @sort-change="handleSortChange"
          class="version-table"
          header-row-class-name="table-header"
        >
        <el-table-column label="更新内容" min-width="600" class-name="content-column">
          <template #default="{ row }">
            <div class="content-wrapper">
              <div 
                class="content-text" 
                :class="{ 'expanded': row.isExpanded }"
                @click="toggleContent(row)"
              >
                {{ row.content }}
              </div>
              <div v-if="row.content && row.content.length > 100" class="content-toggle">
                <el-button 
                  type="text" 
                  size="small" 
                  @click="toggleContent(row)"
                  class="toggle-btn"
                >
                  {{ row.isExpanded ? '收起' : '展开' }}
                </el-button>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="authorName" label="发布人" min-width="120" show-overflow-tooltip />
        <el-table-column prop="version" label="版本号" min-width="120" sortable="custom" show-overflow-tooltip />
        <el-table-column prop="createAt" label="创建时间" min-width="160" show-overflow-tooltip />
        <el-table-column label="操作" min-width="220" class-name="action-column">
          <template #default="{ row }">
            <div class="action-btn-group">
              <el-tooltip content="编辑版本" placement="top">
                <el-button size="small" @click="handleEdit(row)" class="edit-btn">
                  <el-icon><EditPen /></el-icon>
                  编辑
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除版本" placement="top">
                <el-button size="small" type="danger" @click="handleDelete(row)" class="delete-btn">
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </el-tooltip>
              <el-tooltip :content="getRatingButtonLabel(row)" placement="top">
                <el-button size="small" :type="getRatingButtonType(row)" @click="showRatingDialog(row)" class="rate-btn">
                  <el-icon><StarFilled /></el-icon>
                  {{ getRatingButtonLabel(row) }}
                </el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        </el-table>
      </div>
      
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="custom-pagination"
        />
      </div>
    </el-card>
    
    <!-- 添加/编辑版本对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="50%"
      class="version-dialog"
    >
      <el-form :model="versionForm" :rules="rules" ref="versionFormRef" label-width="100px" class="version-form">
        <el-form-item label="版本号" prop="version">
          <el-input v-model="versionForm.version" placeholder="例如：v1.0.0" class="dialog-input" />
        </el-form-item>
        <el-form-item label="更新内容" prop="content">
          <el-input
            v-model="versionForm.content"
            type="textarea"
            :rows="5"
            placeholder="请输入详细的更新内容"
            class="dialog-textarea"
          />
        </el-form-item>
        <el-form-item label="发布人" prop="author">
          <el-select
            v-model="versionForm.author"
            filterable
            clearable
            placeholder="请选择发布人"
            class="dialog-input"
            :filter-method="filterAuthors"
          >
            <el-option
              v-for="item in filteredAuthorOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" class="dialog-cancel-btn">取消</el-button>
          <el-button type="primary" @click="submitForm" class="dialog-confirm-btn">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 评分对话框 -->
    <el-dialog
      v-model="ratingDialogVisible"
      title="版本评分"
      width="48%"
      class="rating-dialog"
    >
      <el-form :model="ratingForm" :rules="ratingRules" ref="ratingFormRef" label-width="88px" class="rating-form">
        <div class="rating-header" v-if="currentRatingRow">
          <span class="tag">版本</span>
          <span class="value">{{ currentRatingRow.version }}</span>
          <span class="dot" />
          <span class="tag">发布人</span>
          <span class="value">{{ currentRatingRow.authorName }}</span>
        </div>
        <el-form-item label="评分" prop="rating">
          <div class="rating-controls">
            <el-slider
              v-model="ratingForm.rating"
              :min="1"
              :max="100"
              :step="1"
              class="rating-slider"
            />
            <el-input-number
              v-model="ratingForm.rating"
              :min="1"
              :max="100"
              :precision="0"
              controls-position="right"
              class="rating-number"
            />
            <span class="rating-badge" :class="ratingLevelClass">{{ ratingLevelText }}</span>
          </div>
        </el-form-item>
        <el-form-item label="评分备注">
          <el-input
            v-model="ratingForm.comment"
            type="textarea"
            :rows="4"
            :maxlength="200"
            show-word-limit
            placeholder="请输入评分备注（可选，最多200字）"
            class="dialog-textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="ratingDialogVisible = false" class="dialog-cancel-btn">取消</el-button>
          <el-button type="primary" @click="submitRating" class="dialog-confirm-btn">提交评分</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, EditPen, Delete, StarFilled } from '@element-plus/icons-vue'
import {
    GetGetOnlineTaskGuarantors,//获取所有人
    PostCreateVersion, // 创建版本
    PostGetVersionList, // 获取产品版本列表
    PostUpdateVersion, // 更新产品版本
    GetDeleteVersion, // 删除产品版本
    PostCreateVersionRating, // 产品版本评分
} from "@/api/newDemands/index";

// 发布人选项
const authorOptions = ref([])
// 过滤后的发布人选项
const filteredAuthorOptions = ref([])

// 表格数据
const tableData = ref([])

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 时间工具：格式化为 YYYY-MM-DD HH:mm:ss
const pad2 = (num) => String(num).padStart(2, '0')
const formatDateTime = (date) => {
  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())} ${pad2(date.getHours())}:${pad2(date.getMinutes())}:${pad2(date.getSeconds())}`
}
const getDefaultMonthRange = () => {
  const now = new Date()
  const start = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0)
  const end = new Date(now.getFullYear(), now.getMonth() + 1, 1, 0, 0, 0)
  return [formatDateTime(start), formatDateTime(end)]
}

// 筛选表单
const filterForm = reactive({
  version: '',
  author: '',
  ratingStatus: '',
  createAtRange: []
})

// 设置创建时间默认范围为：本月第一天 00:00:00 至 下月第一天 00:00:00
filterForm.createAtRange = getDefaultMonthRange()

// 加载状态
const loading = ref(false)

// 对话框状态
const dialogVisible = ref(false)
const dialogTitle = ref('')
const versionFormRef = ref(null)

// 版本表单
const versionForm = reactive({
  id: null,
  version: '',
  content: '',
  author: '',
  rating: 100
})

// 评分对话框状态
const ratingDialogVisible = ref(false)
const currentRatingRow = ref(null)
const ratingFormRef = ref(null)

// 评分表单
const ratingForm = reactive({
  rating: 100,
  comment: ''
})

// 评分验证规则
const ratingRules = reactive({
  rating: [
    { required: true, message: '请输入评分', trigger: 'blur' },
    { type: 'number', min: 1, max: 100, message: '评分范围1-100', trigger: 'blur' }
  ]
})

// 评分等级文案与样式
const ratingLevelText = computed(() => {
  const score = Number(ratingForm.rating || 0)
  if (score >= 90) return '优秀'
  if (score >= 75) return '良好'
  if (score >= 60) return '合格'
  return '待改进'
})

const ratingLevelClass = computed(() => {
  const score = Number(ratingForm.rating || 0)
  if (score >= 90) return 'level-excellent'
  if (score >= 75) return 'level-good'
  if (score >= 60) return 'level-pass'
  return 'level-bad'
})

// 表单验证规则
const rules = reactive({
  version: [
    { required: true, message: '请输入版本号', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入更新内容', trigger: 'blur' }
  ],
  author: [
    { required: true, message: '请输入发布人姓名', trigger: 'blur' }
  ]
})

// 发布人模糊搜索方法
const filterAuthors = (query) => {
  if (!authorOptions.value || !Array.isArray(authorOptions.value)) {
    console.warn('authorOptions数据异常:', authorOptions.value);
    filteredAuthorOptions.value = [];
    return;
  }
  
  const searchText = query ? query.trim().toLowerCase() : '';
  
  if (!searchText) {
    filteredAuthorOptions.value = authorOptions.value;
  } else {
    filteredAuthorOptions.value = authorOptions.value.filter(item => {
      return item.label && item.label.toLowerCase().includes(searchText);
    });
  }
};

// 切换内容展开/收起状态
const toggleContent = (row) => {
  row.isExpanded = !row.isExpanded
}

// 根据评分显示按钮文案
const getRatingButtonLabel = (row) => {
  return Number(row.rating || 0) === 0 ? '未评分' : '已评分'
}

// 根据评分状态返回按钮颜色：已评分为绿色(success)，未评分为橙色(warning)
const getRatingButtonType = (row) => {
  return Number(row.rating || 0) === 0 ? 'warning' : 'success'
}

// 获取版本列表数据
const loadTableData = async () => {
  try {
    loading.value = true
    const { data } = await PostGetVersionList({
      version: filterForm.version,
      authorUUID: filterForm.author,
      startTime: Array.isArray(filterForm.createAtRange) && filterForm.createAtRange.length ? filterForm.createAtRange[0] : '',
      endTime: Array.isArray(filterForm.createAtRange) && filterForm.createAtRange.length ? filterForm.createAtRange[1] : '',
      page: pagination.currentPage,
      pageSize: pagination.pageSize
    })
    
    if (data.code === 200 && data.data) {
      // 为每个数据项添加展开状态
      let list = data.data.list.map(item => ({
        ...item,
        isExpanded: false
      }))

      // 前端评分状态过滤：rating 为 0 => 未评分; 非 0 => 已评分
      if (filterForm.ratingStatus === 'rated') {
        list = list.filter(item => Number(item.rating || 0) !== 0)
      } else if (filterForm.ratingStatus === 'unrated') {
        list = list.filter(item => Number(item.rating || 0) === 0)
      }

      tableData.value = list
      pagination.total = data.data.total
    } else {
      ElMessage.error(data.msg || '获取版本列表失败')
    }
  } catch (error) {
    console.error('获取版本列表失败:', error)
    ElMessage.error(error?.response?.data?.msg || error?.msg || '获取版本列表失败')
  } finally {
    loading.value = false
  }
}

// 初始化数据
onMounted(async () => {
  try {
    const {data} = await GetGetOnlineTaskGuarantors()
    if (data.code === 200 && data.data) {
      authorOptions.value = data.data.map(item => ({
        label: item.userName,
        value: item.uuid
      }))
      // 初始化过滤后的选项
      filteredAuthorOptions.value = authorOptions.value
    } else {
      ElMessage.error(data.msg || '初始化数据失败')
    }
    
    // 获取版本列表数据
    await loadTableData()
  } catch (error) {
    console.error('初始化数据失败:', error)
    ElMessage.error(error?.response?.data?.msg || error?.msg || '初始化数据失败')
  }
})

// 搜索处理
const handleSearch = () => {
  pagination.currentPage = 1
  loadTableData()
}

// 重置筛选
const resetFilter = () => {
  filterForm.version = ''
  filterForm.author = ''
  filterForm.ratingStatus = ''
  filterForm.createAtRange = []
  pagination.currentPage = 1
  loadTableData()
}

// 排序处理
const handleSortChange = ({ prop, order }) => {
  console.log('排序字段:', prop, '排序方式:', order)
  // 这里可以添加排序参数并重新获取数据
}

// 分页大小变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
  loadTableData()
}

// 当前页变化
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  loadTableData()
}

// 添加版本
const handleAddVersion = () => {
  dialogTitle.value = '添加版本'
  resetVersionForm()
  dialogVisible.value = true
}

// 编辑版本
const handleEdit = (row) => {
  dialogTitle.value = '编辑版本'
  versionForm.id = row.ID
  versionForm.version = row.version
  versionForm.content = row.content
  versionForm.author = row.authorUUID
  dialogVisible.value = true
}

// 删除版本
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除版本 ${row.version} 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    loading.value = true
    
    // 调用删除API
    const { data } = await GetDeleteVersion(String(row.ID))
    if (data.code === 200) {
      ElMessage.success(data.msg)
      // 重新加载数据
      await loadTableData()
    } else {
      ElMessage.error(data.msg || '删除版本失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除版本失败:', error)
      ElMessage.error(error?.response?.data?.msg || error?.msg || '删除版本失败')
    }
  } finally {
    loading.value = false
  }
}

// 重置表单
const resetVersionForm = () => {
  versionForm.id = null
  versionForm.version = ''
  versionForm.content = ''
  versionForm.author = ''
  versionForm.rating = 100
}

// 显示评分对话框
const showRatingDialog = (row) => {
  currentRatingRow.value = row
  ratingForm.rating = row.rating || 100
  ratingForm.comment = row.ratingMsg || ''
  ratingDialogVisible.value = true
}

// 提交表单
const submitForm = async () => {
  try {
    await versionFormRef.value.validate()
    
    loading.value = true
    
    if (versionForm.id) {
      // 更新操作
      const { data } = await PostUpdateVersion({
        id: versionForm.id,
        version: versionForm.version,
        content: versionForm.content,
        authorUUID: versionForm.author
      })
      
      if (data.code === 200) {
        ElMessage.success(data.msg)
        dialogVisible.value = false
        await loadTableData()
      } else {
        ElMessage.error(data.msg || '更新版本失败')
      }
    } else {
      // 添加操作
      const { data } = await PostCreateVersion({
        version: versionForm.version,
        content: versionForm.content,
        authorUUID: versionForm.author
      })
      
      if (data.code === 200) {
        ElMessage.success(data.msg)
        dialogVisible.value = false
        // 重新加载数据
        await loadTableData()
      } else {
        ElMessage.error(data.msg || '添加版本失败')
      }
    }
  } catch (error) {
    console.error('提交版本失败:', error)
    ElMessage.error(error?.response?.data?.msg || error?.msg || '提交版本失败')
  } finally {
    loading.value = false
  }
}

// 提交评分
const submitRating = async () => {
  try {
    await ratingFormRef.value.validate()
    
    loading.value = true
    
    const { data } = await PostCreateVersionRating({
      id: currentRatingRow.value.ID,
      ratingMsg: ratingForm.comment,
      rating: ratingForm.rating
    })
    
    if (data.code === 200) {
      ElMessage.success(data.msg)
      ratingDialogVisible.value = false
      await loadTableData()
    } else {
      ElMessage.error(data.msg || '提交评分失败')
    }
  } catch (error) {
    console.error('提交评分失败:', error)
    ElMessage.error(error?.response?.data?.msg || error?.msg || '提交评分失败')
  } finally {
    loading.value = false
  }
}
</script>

<style>
.version-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 64px);
}

.version-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden; /* 防止内部子元素外溢，跟随圆角裁切 */
}

.version-card .header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.version-card .header .title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.version-card .header .add-btn {
  height: 40px;
  padding: 0 16px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.version-card .filter-area {
  margin-bottom: 20px;
}

.version-card .filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

.add-version-btn {
  margin-left: auto;
}

.version-card .filter-form .el-form-item {
  margin-bottom: 0;
}

.version-card .filter-input,
.version-card .filter-select {
  width: 200px;
}

.version-card .filter-input .el-input__wrapper,
.version-card .filter-select .el-input__wrapper {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.version-card .action-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 500;
}

.version-card .action-btn.el-button--primary {
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
}

.version-table {
  border-radius: 8px;
  overflow: hidden;
}

/* 防止表格内容外溢，支持横向滚动 */
.table-scroll {
  width: 100%;
  overflow-x: auto;
}
.table-scroll .el-table {
  min-width: 100%;
  table-layout: fixed; /* 固定布局，防止列内容撑破表格 */
}

.version-table .table-header th {
  background-color: #f8f9fa;
  color: #606266;
  font-weight: 600;
  height: 48px;
}

.version-table .el-table__row {
  height: 56px;
}

.version-table .el-table__row:hover td {
  background-color: #f5f7fa !important;
}

.version-table .content-column .cell {
  line-height: 1.6;
  overflow: hidden;
}

/* 表格单元默认断行，避免超长字符撑破 */
.version-table .cell {
  word-break: break-word;
  white-space: normal;
}

/* 内容展示样式 */
.content-wrapper {
  position: relative;
  width: 100%;
  padding: 8px 0;
  overflow: hidden;
}

.content-text {
  line-height: 1.8;
  color: #303133;
  cursor: pointer;
  transition: all 0.3s ease;
  word-break: break-word;
  white-space: pre-wrap; /* 保留换行但允许断行 */
  max-height: 72px;
  overflow: hidden;
  position: relative;
  font-size: 14px;
  background: #fafafa;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
}

.content-text.expanded {
  max-height: none;
  background: #f8f9fa;
  border-color: #e6f7ff;
}

.content-text:not(.expanded)::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 24px;
  background: linear-gradient(to right, transparent, #fafafa);
  pointer-events: none;
  border-radius: 0 6px 6px 0;
}

.content-text.expanded:not(.expanded)::after {
  display: none;
}

.content-toggle {
  margin-top: 8px;
  text-align: center;
}

.toggle-btn {
  color: #1890ff;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
  background: #f0f7ff;
  border: 1px solid #d0e3ff;
}

.toggle-btn:hover {
  background-color: #e6f1ff;
  color: #40a9ff;
  border-color: #40a9ff;
}

.content-text:hover {
  border-color: #d0e3ff;
  background: #f8f9fa;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-text {
    font-size: 13px;
    padding: 10px;
    max-height: 60px;
  }
  
  .toggle-btn {
    font-size: 11px;
    padding: 3px 10px;
  }
}

.version-table .action-column .edit-btn,
.version-table .action-column .delete-btn,
.version-table .action-column .rate-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.action-btn-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.version-table .action-column .edit-btn {
  background-color: #f0f7ff;
  border-color: #d0e3ff;
  color: #1890ff;
}

.version-table .action-column .edit-btn:hover {
  background-color: #e6f1ff;
}

.version-table .action-column .delete-btn:hover {
  background-color: #ffeded;
}

.version-table .action-column .rate-btn {
  background-color: #fff7e6;
  border-color: #ffd591;
  color: #fa8c16;
}

.version-table .action-column .rate-btn:hover {
  background-color: #ffe7ba;
}

/* 已评分为绿色时覆盖按钮样式 */
.el-button.el-button--success.rate-btn {
  background-color: #f6ffed;
  border-color: #b7eb8f;
  color: #389e0d;
}
.el-button.el-button--success.rate-btn:hover {
  background-color: #eaffd3;
}

.rating-dialog .el-dialog__header {
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e8;
}

.rating-dialog .el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.rating-dialog .el-dialog__body {
  padding: 24px;
}

.rating-dialog .el-dialog__footer {
  padding: 16px 24px;
  border-top: 1px solid #e8e8e8;
}

/* 评分对话框增强样式 */
.rating-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.rating-header .tag {
  color: #909399;
  font-size: 13px;
}
.rating-header .value {
  color: #303133;
  font-weight: 500;
}
.rating-header .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d9d9d9;
  display: inline-block;
  margin: 0 4px;
}

.rating-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rating-slider { 
  flex: 1; 
  min-width: 220px; 
  width: 100%;
  padding: 0 8px;
}
.rating-number { width: 120px; }
.rating-badge {
  padding: 6px 10px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid transparent;
}
.rating-slider .el-slider__runway { 
  height: 6px; 
  border-radius: 6px; 
  margin: 10px 0; 
}
.rating-slider .el-slider__bar { 
  height: 6px; 
  border-radius: 6px; 
}
.rating-slider .el-slider__button { 
  width: 16px; 
  height: 16px; 
}
.rating-badge.level-excellent { background: #f6ffed; color: #389e0d; border-color: #b7eb8f; }
.rating-badge.level-good { background: #e6f7ff; color: #096dd9; border-color: #91d5ff; }
.rating-badge.level-pass { background: #fffbe6; color: #d48806; border-color: #ffe58f; }
.rating-badge.level-bad { background: #fff2f0; color: #cf1322; border-color: #ffa39e; }

.rating-dialog .dialog-rate .el-rate__icon {
  font-size: 24px;
  margin-right: 4px;
}

.rating-dialog .dialog-rating-input {
  width: 120px;
}

.rating-dialog .dialog-rating-input .el-input__wrapper {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.version-card .pagination {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

.version-card .custom-pagination .btn-prev,
.version-card .custom-pagination .btn-next,
.version-card .custom-pagination .number {
  border-radius: 6px;
  margin: 0 4px;
}

.version-card .custom-pagination .el-pager li.is-active {
  background-color: #1890ff;
  color: white;
}

.version-dialog {
  border-radius: 12px;
}

.version-dialog .el-dialog__header {
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
}

.version-dialog .el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.version-dialog .el-dialog__body {
  padding: 24px;
}

.version-dialog .el-dialog__footer {
  padding: 16px 24px;
  border-top: 1px solid #e8e8e8;
}

.version-form .dialog-input .el-input__wrapper,
.version-form .dialog-textarea .el-input__wrapper,
.version-form .dialog-datepicker .el-input__wrapper {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.version-form .dialog-textarea .el-textarea__inner {
  line-height: 1.6;
  resize: none;
}

.dialog-footer .dialog-cancel-btn,
.dialog-footer .dialog-confirm-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 500;
}

.dialog-footer .dialog-confirm-btn {
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
}
</style>